<template>
  <div class="admin-container">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <div class="logo">
          <i class="el-icon-s-flag"></i>
          <h3>人生管理系统</h3>
        </div>
      </div>
      <div class="header-right">
        <el-dropdown trigger="click" class="user-dropdown">
          <span class="user-info">
            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar">
            <span class="user-name">管理员</span>
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <router-link :to="{name:'PersonProfileView'}">
              <el-dropdown-item><i class="el-icon-user"></i> 个人中心</el-dropdown-item>
            </router-link>
            <router-link :to="{name:'Setting'}">
              <el-dropdown-item><i class="el-icon-setting"></i> 系统设置</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided><i class="el-icon-switch-button"></i> 退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <div class="main-content">
      <!-- 侧边栏导航 -->
      <el-aside class="sidebar" :width="isCollapsed ? '64px' : '220px'">
        <el-menu
            default-active="ControlIndexView"
            class="sidebar-menu"
            :collapse="isCollapsed"
            background-color="#f9fafb"
            text-color="#64748b"
            active-text-color="#3b82f6"
            unique-opened
            @select="relocate_href"
        >
          <el-submenu index="Finance">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>财务</span>
            </template>
            <el-menu-item index="FinanceView">收支管理</el-menu-item>
          </el-submenu>
          <el-submenu index="Work">
            <template slot="title">
              <i class="el-icon-trophy"></i>
              <span>事业</span>
            </template>
            <el-menu-item index="TodoView">ToDo管理</el-menu-item>
            <el-menu-item index="GoalView">目标管理</el-menu-item>
           <el-menu-item index="ProgramView">项目管理</el-menu-item>
          </el-submenu>
          <el-submenu index="Live">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span>生活作息</span>
            </template>
            <el-menu-item index="FoodView">饮食管理</el-menu-item>
          </el-submenu>
                    <el-submenu index="Dash">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span>仪表盘</span>
            </template>
            <el-menu-item index="DashView">仪表盘配置</el-menu-item>
          </el-submenu>

        </el-menu>

        <button
            class="collapse-btn"
            @click="isCollapsed = !isCollapsed"
        >
          <i class="el-icon-s-fold" v-if="!isCollapsed"></i>
          <i class="el-icon-s-unfold" v-if="isCollapsed"></i>
        </button>
      </el-aside>

      <!-- 主内容区域 -->
      <el-main class="content">
        <!--主内容router-->
        <router-view></router-view>
      </el-main>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import {
  Card, Button, Input, Table, TableColumn, Tag,
  Menu, MenuItem, Submenu, Header, Main, Aside,
  Footer, Dropdown, DropdownMenu, DropdownItem,
  Breadcrumb, BreadcrumbItem, Icon
} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Card);
Vue.use(Button);
Vue.use(Input);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Tag);
Vue.use(Menu);
Vue.use(MenuItem);
Vue.use(Submenu);
Vue.use(Header);
Vue.use(Main);
Vue.use(Aside);
Vue.use(Footer);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Icon);

export default {
  name: 'ControlView',
  data() {
    return {
      isCollapsed: false,
      isLightTheme: true,

    };
  },

  methods: {
    toggleTheme() {
      this.isLightTheme = !this.isLightTheme;
      document.body.classList.toggle('dark-theme', !this.isLightTheme);
    },
    relocate_href(index) {
      this.$router.push({name: index}).catch(err => {
        // 捕获重复跳转错误
        if (err.name !== 'NavigationDuplicated') throw err
      })
    },

  },
  mounted() {
    this.$router.push({name: "IndexView"})
  }

}

</script>

<style scoped>
.admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f9fafb;
  color: #334155;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
}

.logo i {
  font-size: 24px;
  color: #3b82f6;
  margin-right: 10px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #3b82f6;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-dropdown {
  margin-right: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.user-name {
  margin-right: 5px;
}

.theme-toggle {
  background: none;
  border: none;
  font-size: 18px;
  color: #64748b;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.theme-toggle:hover {
  background-color: #f1f5f9;
}

/* 主内容区域 */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  background-color: #f9fafb;
  border-right: 1px solid #e2e8f0;
  transition: width 0.3s;
  overflow: hidden;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
  padding-top: 20px;
}

.el-menu-item, .el-submenu__title {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  transition: all 0.2s;
}

.el-menu-item:hover, .el-submenu__title:hover {
  background-color: #eff6ff !important;
}

.el-menu-item.is-active {
  background-color: #eff6ff !important;
  border-left: 3px solid #3b82f6;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f9fafb;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #1e293b;
}

.breadcrumb {
  font-size: 14px;
}

/* 首页仪表盘样式 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-card .el-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 5px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 5px 0;
  color: #1e293b;
}

.stat-change {
  font-size: 12px;
  margin: 0;
  display: flex;
  align-items: center;
}

.stat-change.positive {
  color: #10b981;
}

.stat-change.negative {
  color: #ef4444;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.stat-icon.blue {
  background-color: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.stat-icon.green {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.stat-icon.orange {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.stat-icon.purple {
  background-color: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-card .el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.chart-card .el-card__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.recent-activities .el-card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.recent-activities .el-card__header {
  padding: 15px 20px;
  border-bottom: 1px solid #f1f5f9;
}

.recent-activities .el-card__header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* 内容区域 */
.module-content {
  height: 100%;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #64748b;
}

.empty-state i {
  font-size: 64px;
  margin-bottom: 20px;
  color: #cbd5e1;
}

.empty-state h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #1e293b;
}

.empty-state p {
  margin: 0 0 20px 0;
  max-width: 400px;
}

/* 页脚 */
.footer {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #64748b;
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.footer p {
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    z-index: 100;
    height: 100%;
    left: -220px;
    transition: left 0.3s;
  }

  .sidebar.open {
    left: 0;
  }

  .content {
    padding: 15px;
  }

  .content-title {
    font-size: 18px;
  }
}
</style>
